<template>
  <div>
 
        <van-search v-model="value" placeholder="请回车搜索数据" class="input1" />  
		<div  class="category_comit">
			<div class="category_left">	
				<van-sidebar v-model="activeKey" class="sidebar">
				   <van-sidebar-item v-for="(item,index) in nav" :key="index" 
				   :title="item.name"  :name="item.id"
				   @click="addGoto(index)"/>
				</van-sidebar>
			</div>
			<div class="category_reight">
				<div class="category_swiper">
				    <Swiper :imges="imges"></Swiper>
				</div>

        
				<div class="chosen-name">
				<div
						class="chosen-nr"						 
						  v-for="(item,index) in subNav" :key="index"
						  @click="onclick(item)"
						 >
						 <img :src="item.icon" />
						 <p style="font-size: 9px;">{{item.name}}</p>
						 </div>
				</div>
				
				
			</div>
			
		</div>
          
  </div>
</template>

<script>

import Swiper from '../components/swiper/Swiper.vue'
export default {
  data(){
    return {
      value:"",
       activeKey: "0",
       list:[],
       nav:[],
       subNav:[],
       status:0,

    

    }
  },
  mounted(){
      this.$APIClient
			.fen().then(res=>{
        console.log(res)
        this.list = res.data.data

        var temp = res.data.data

        this.nav.push({
          name:"所有分类",
          pid:0,
          id:10086
        })

        temp.forEach(item=>{
          if(item.pid === 0){
            this.nav.push(item)
          }

          if(item.pid !== 0){
            this.subNav.push(item)
          }
        })
      })
          this.$APIClient.swiper().then((res)=>{
      // console.log(res);
      this.imges = res.data.data
    })
  },
  components:{
    Swiper
  },

  methods:{
      addGoto(index){

        this.status = index;

        var temp = this.nav[this.status].id

        this.subNav = [];

        this.list.forEach(item=>{
          if(item.pid === temp){
              this.subNav.push(item)
          }

          if(this.nav[this.status].id == 10086){
              this.subNav.push(item)
          }
        })
      },

	  onclick(item){
		  console.log(item)
		  this.$router.push({
			  path:'/details',
			  query:{
				  item,
			  }
		  })
    }
    
    
  }
}
</script>

<style scoped>
.category_comit{
	width: 100%;
	height: 600px;
	margin-top: 52px;
	display: flex;
}
.category_left{
	width: 30%;
	height: 600px;
}
.category_reight{
	width: 70%;
	height: 600px;
}
.sidebar {
	width: 30%;
	position: fixed;
	left: 0px;

}
.category_swiper{

margin-left: 7px;


}

.chosen-name{
	width: 100%;
	height: 400px;
	display: flex;
	flex-wrap: wrap;

}
.chosen-nr{
	text-align: center;
	width: 70px;
	height:70px;
	margin-left: 10px;
	margin-top: 10px;
}
.chosen-nr img{
	width:50px;
	height: 50px;
}
.input1 {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99999;
}
</style>